@use "theme" as *;
@use "vars" as *;
@use "mixins";

// Basic Styling
//------------------------------------------------------------------------------
body {
  font-family: $font-sans;
  font-weight: 100;
  margin: 0;
  padding: 0;
}

pre {
  white-space: pre-wrap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-sans;
  margin-top: 45px;
  margin-bottom: 20px;
}

a {
  color: $accent;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
    outline: 0;
  }

}

input {
  box-sizing: border-box;
}

// Tables
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem 0.5rem;
  text-align: left;
  border: 1px solid $gray-50;
  p {
    margin: 0;
  }
}

// Buttons
button:focus {
  outline: 0;
}

.legibility {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
.visually-hidden {
  display: none;
}

.button {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  font-style: normal;
  font-family: $font-sans;
  background-color: transparent;
  border-radius: 3px;
  transition: background-color 0.3s;
  display: inline-block;
  padding: 4px 8px 6px 8px;
  border: 1px solid $btn-default-border;
  color: $btn-default-text-color;
  cursor: pointer;

  @include mixins.tablet{
    font-size: 15px;
    line-height: 20px;
    padding: 5px 10px;
  }
  @include mixins.desktop{
    font-size: 15px;
    line-height: 20px;
    padding: 5px 10px;
  }
}

.button.btn-cat {
  background: $btn-default-background;
  border-radius: 0;
  margin: 4px 0 0 0;
  -webkit-font-smoothing: antialiased;

  @include mixins.tablet{
    margin: 3px 0 0 0;
  }
  @include mixins.desktop{
    margin: 3px 0 0 0;
  }

  &:hover {
    cursor: pointer;
    background: $btn-default-background-hover;
    color: $btn-default-text-hover;
    text-decoration: none;
  }
}

.button.btn-homepage {
  margin: 10px 0 0 0;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  background-color: $btn-homepage-background;
  border: 1px solid $btn-homepage-border;
  border-radius: 0;
  color: $main-page-btn-color;
  -webkit-box-shadow: 2.5px 2.5px 0px -1px $accent-dark;
  -moz-box-shadow: 2.5px 2.5px 0px -1px $accent-dark;
  box-shadow: 2.5px 2.5px 0px -1px $accent-dark;
  padding: 5px 12px;

  &:hover {
    background: $elem-link-accent;
    color: $white;
    -webkit-box-shadow: 3px 3px 0px 0px $gray-25;
    -moz-box-shadow: 3px 3px 0px 0px $gray-25;
    box-shadow: 3px 3px 0px 0px $gray-25;
    text-decoration: none;
  }
}

.button.btn-footer {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
  font-family: $font-sans;
  background-color: transparent;
  transition: background-color 0.3s;
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid $gray-40;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: 5px 5px 0px 0px $offwhite;
  -moz-box-shadow: 5px 5px 0px 0px $offwhite;
  box-shadow: 5px 5px 0px 0px $offwhite;
  margin-right: 10px;
  color: $gray-20;
  margin-top: 10px;

  &:hover {
    background: $gray-20;
    color: $white;
  }
}

.button.btn-plaintext {
  border: none;
  text-decoration: underline;
  background: transparent;
  color: $nav-text-color;
  font-size: 13px;
  line-height: 29px;

  &:hover {
    cursor: pointer;
    color: $accent;
  }
}
